<template>
  <div>
    <el-form
      ref="forgetForm"
      :model="forForm"
      :rules="forRules"
    >
      <el-row style="font-size: 18px">
        <span style="color: indianred">验证码</span>已经发往你的手机，60s后可以点击再次发送
      </el-row>
      <el-form-item prop="code" style="margin-top: 15px">
        <el-input v-model="forForm.code" type="text" autocomplete="off" placeholder="请输入短信验证码">
          <el-button slot="prepend" :disabled="messageStat" type="primary" @click="freshMessageText">{{ getCodeMessage }}</el-button>
        </el-input>
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-button type="primary" style="width: 100%" @click="nextStep">下一步</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { validateVerifyCode } from '@/utils/validate-tools'

export default {
  name: 'ForgetTwo',
  data() {
    return {
      getCodeMessages: '发送验证码',
      messageStat: false,
      forForm: {
        code: ''
      },
      forRules: {
        code: [{ require: true, trigger: 'blur', validator: validateVerifyCode }]
      }
    }
  },
  computed: {
    getCodeMessage() {
      return this.getCodeMessages
    }
  },
  methods: {
    freshMessageText() {
      const that = this
      let nowTime = 59
      this.messageStat = true
      const interval = setInterval(() => {
        that.getCodeMessages = '重新发送(' + nowTime + ')'
        if (nowTime === 0) {
          that.messageStat = false
          that.getCodeMessages = '发送短信验证码'
          clearInterval(interval)
        }
        nowTime--
      }, 1000)
    },
    nextStep() {
      this.$emit('stepChangeEvent', 3)
      this.$refs.forgetForm.resetFields()
    },
    clearAllData() {
      this.$refs.forgetForm.resetFields()
    }
  }
}
</script>

<style scoped>

</style>
